<!-- 充值档位 -->

<template>
    <div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-input v-model="filter.group" placeholder="请输入充值分组" clearable></el-input>
            </el-col>
            <el-col :span="6">
                <el-select v-model="filter.status" placeholder="请选择是否启用" clearable style="width: 100%;">
                    <el-option label="启用" value="enabled"></el-option>
                    <el-option label="停用" value="disabled"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-button style="margin-left: 20px" type="primary" @click="openAddDialog">新增</el-button>
            <el-button type="warning" @click="exportSlots">导出</el-button>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="模版名称"></el-table-column>
            <el-table-column prop="group" label="充值分组"></el-table-column>
            <el-table-column prop="type" label="充值类型"></el-table-column>
            <el-table-column prop="amount" label="充值金额（分）"></el-table-column>
            <el-table-column prop="bookCount" label="书币数量"></el-table-column>
            <el-table-column prop="giftCount" label="赠币数量"></el-table-column>
            <el-table-column prop="tagName" label="标签名称"></el-table-column>
            <el-table-column prop="order" label="排序号"></el-table-column>
            <el-table-column prop="default" label="是否默认">
                <template #default="{ row }">
                    <el-tag :type="row.default === '是' ? 'success' : 'info'">{{ row.default }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-tag :type="row.status === '启用' ? 'success' : 'danger'">{{ row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-link type="primary" @click="editSlot(row)">修改</el-link>
                    <el-link style="margin-left: 20px" type="danger" @click="deleteSlot(row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog v-model="addDialogVisible" title="添加充值档位" width="500px">
            <el-form :model="addForm">
                <el-form-item label="排序号" :label-width="formLabelWidth" required>
                    <el-input v-model="addForm.order"></el-input>
                </el-form-item>
                <el-form-item label="充值分组" :label-width="formLabelWidth" required>
                    <el-input v-model="addForm.group"></el-input>
                </el-form-item>
                <el-form-item label="充值金额（分）" :label-width="formLabelWidth" required>
                    <el-input-number v-model="addForm.amount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="书币数量" :label-width="formLabelWidth" required>
                    <el-input-number v-model="addForm.bookCount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="赠币数量" :label-width="formLabelWidth">
                    <el-input-number v-model="addForm.giftCount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="充值类型" :label-width="formLabelWidth" required>
                    <el-select v-model="addForm.type" placeholder="请选择充值类型">
                        <el-option label="VIP日会员" value="VIP日会员"></el-option>
                        <el-option label="VIP月会员" value="VIP月会员"></el-option>
                        <!-- 其他选项 -->
                    </el-select>
                </el-form-item>
                <el-form-item label="是否默认档位" :label-width="formLabelWidth">
                    <el-select v-model="addForm.default" placeholder="请选择">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签名称" :label-width="formLabelWidth">
                    <el-input v-model="addForm.tagName"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="addForm.remarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button style="margin-left: 300px" @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </span>
        </el-dialog>

        <el-dialog v-model="updateDialogVisible" title="修改充值档位" width="500px">
            <el-form :model="updateForm">
                <el-form-item label="排序号" :label-width="formLabelWidth" required>
                    <el-input v-model="updateForm.order"></el-input>
                </el-form-item>
                <el-form-item label="充值分组" :label-width="formLabelWidth" required>
                    <el-input v-model="updateForm.group"></el-input>
                </el-form-item>
                <el-form-item label="充值金额（分）" :label-width="formLabelWidth" required>
                    <el-input-number v-model="updateForm.amount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="书币数量" :label-width="formLabelWidth" required>
                    <el-input-number v-model="updateForm.bookCount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="赠币数量" :label-width="formLabelWidth">
                    <el-input-number v-model="updateForm.giftCount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="充值类型" :label-width="formLabelWidth" required>
                    <el-select v-model="updateForm.type" placeholder="请选择充值类型">
                        <el-option label="VIP日会员" value="VIP日会员"></el-option>
                        <el-option label="VIP月会员" value="VIP月会员"></el-option>
                        <!-- 其他选项 -->
                    </el-select>
                </el-form-item>
                <el-form-item label="是否默认档位" :label-width="formLabelWidth">
                    <el-select v-model="updateForm.default" placeholder="请选择">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签名称" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.tagName"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="updateForm.remarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button style="margin-left: 300px" @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpdate">确定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';

    const filter = ref({
        group: '',
        status: ''
    });

    const tableData = ref([
        { name: '1', group: '未充值', type: 'VIP日会员', amount: 990, bookCount: 990, giftCount: 0, tagName: '日卡', order: 1, default: '是', status: '启用', remarks: '' },
        { name: '1', group: '未充值', type: 'VIP月会员', amount: 1990, bookCount: 1990, giftCount: 0, tagName: '月卡', order: 2, default: '否', status: '启用', remarks: '' },
        // 其他数据...
    ]);

    const total = ref(tableData.value.length);
    const currentPage = ref(1);
    const pageSize = ref(10);

    const addDialogVisible = ref(false);
    const updateDialogVisible = ref(false);

    const addForm = ref({
        order: '',
        group: '',
        amount: 0,
        bookCount: 0,
        giftCount: 0,
        type: '',
        default: '否',
        tagName: '',
        remarks: ''
    });

    const updateForm = ref({
        order: '',
        group: '',
        amount: 0,
        bookCount: 0,
        giftCount: 0,
        type: '',
        default: '否',
        tagName: '',
        remarks: ''
    });

    const formLabelWidth = '120px';

    const search = () => {
        ElMessage.success('搜索功能尚未实现');
    };

    const reset = () => {
        filter.value.group = '';
        filter.value.status = '';
    };

    const clearGroup = () => {
        filter.value.group = '';
    };

    const openAddDialog = () => {
        addDialogVisible.value = true;
    };

    const exportSlots = () => {
        ElMessage.success('导出功能尚未实现');
    };

    const editSlot = (row) => {
        updateForm.value = { ...row };
        updateDialogVisible.value = true;
    };

    const deleteSlot = (row) => {
        ElMessageBox.confirm('此操作将删除该条目, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage.success(`删除 ${row.name}`);
            // Implement delete logic here
        }).catch(() => {
            // Handle cancel action
        });
    };

    const submitAdd = () => {
        ElMessage.success(`添加充值档位成功`);
        addDialogVisible.value = false;
        // Implement add logic here
    };

    const submitUpdate = () => {
        ElMessage.success(`修改充值档位成功`);
        updateDialogVisible.value = false;
        // Implement add logic here
    };

    const handleSizeChange = (size) => {
        ElMessage.success(`每页显示 ${size} 条`);
    };

    const handleCurrentChange = (page) => {
        ElMessage.success(`跳转到第 ${page} 页`);
    };
</script>

<style scoped>
    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .dialog-footer {
        text-align: right;
    }
</style>
